<template>
  <PublicPage pageName="明细" :borderType="true" :showNav="true">
    <view class="bonusDetails">
      <view class="topCartBox">
        <view>
          <view class="tc">{{bonusDetails.title}}</view>
          <view class="themeFontColor fz-32 fw6 u-p-t-16 tc">+{{bonusDetails.changeBonus}}</view>
        </view>
      </view>

      <view class="detailsBox" v-if="bonusDetails.type === 1">
        <view class="u-flex">
          <view class="label">入账时间</view>
          <view>{{bonusDetails.createTime}}</view>
        </view>
        <view class="u-flex u-p-t-16">
          <view class="label">供货团长</view>
          <view class="u-flex">
            <image :src="bonusDetails.groupCommunityLogo" mode="aspectFill" class="headBox" />
            <view class="ov1" style="max-width:450rpx;">{{bonusDetails.groupCommunityName}}</view>
          </view>
        </view>
        <view class="u-flex u-p-t-16">
          <view class="label">帮卖团长</view>
          <view class="u-flex">
            <image :src="bonusDetails.headCommunityLogo" mode="aspectFill" class="headBox" />
            <view class="ov1" style="max-width:450rpx;">{{bonusDetails.headCommunityName}}</view>
          </view>
        </view>
        <view class="flex-row u-p-t-16">
          <view class="label">帮卖商品</view>
          <view @click="navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${bonusDetails.shopWindowId}`})">{{bonusDetails.goodsName}}</view>
        </view>
      </view>

      <!-- 2.0 -->
      <view class="detailsBox" v-if="bonusDetails.type === 2">
        <view class="u-flex">
          <view class="label">入账时间</view>
          <view>{{bonusDetails.createTime}}</view>
        </view>
        <view class="u-flex u-p-t-16">
          <view class="label">复用用户</view>
          <view class="u-flex">
            <image :src="bonusDetails.useCommunityLogo" mode="aspectFill" class="headBox" />
            <view class="ov1" style="max-width:450rpx;">{{bonusDetails.useCommunityName}}</view>
          </view>
        </view>
        <view class="flex-row u-p-t-16">
          <view class="label">复用笔记</view>
          <view>{{bonusDetails.materialTitle}}</view>
        </view>
      </view>

      <!-- 邀请奖励  -->
      <view class="detailsBox" v-if="bonusDetails.type === 3">
        <view class="u-flex">
          <view class="label">入账时间</view>
          <view>{{bonusDetails.createTime}}</view>
        </view>
        <view class="u-flex u-p-t-16">
          <view class="label">受邀人</view>
          <view class="u-flex">
            <image :src="bonusDetails.inviteeCommunityLogo" mode="aspectFill" class="headBox" />
            <view class="ov1" style="max-width:450rpx;">{{bonusDetails.inviteeCommunityName}}</view>
          </view>
        </view>
        <view class="flex-row u-p-t-16">
          <view class="label">说明</view>
          <view>{{bonusDetails.remark}}</view>
        </view>
      </view>
    </view>
  </PublicPage>
</template>

<script>
import publicPage from "@/components/publicPage/index.vue";
import mini from "@/api/mini.js";

export default {
  components: {
    publicPage
  },
  data(){
    return {
      getParams: {},
      bonusDetails:{}
    }
  },
  onLoad(options){
    this.getParams = options
    this.getBonusLogDetails()
  },
  methods:{
    getBonusLogDetails(){
      mini.getBonusLogDetails(this.getParams).then(res=>{
        this.bonusDetails = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bonusDetails{
  height: 100%;
  .topCartBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 312rpx;
    background-color: #FFF;
    box-shadow: inset 0px -1px 0px #EBEDF0;
  }
  .detailsBox{
    padding: 32rpx;
    background-color: #FFF;
    color: #646566;
    .label{
      width: 150rpx;
      padding-right: 32rpx;
      flex-shrink: 0;
      color: #969799;
    }
    .headBox{
      width: 32rpx;
      height: 32rpx;
      border-radius: 32rpx;
      margin-right: 8rpx;
    }
  }
}
</style>